<!--  -->
<template>
  <div class="page-user-list app-container">
    <div class="hd">
      <el-form ref="form" :model="form" :inline="true" label-width="80px">
        <el-form-item label="用户名称">
          <el-input v-model="form.name" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.moblie" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="用户状态">
            <el-option label="正常" value="1" />
            <el-option label="停用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="form.time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:300px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bd">
      <div class="col-btn">
        <el-button type="primary" plain icon="el-icon-plus">增加</el-button>
        <el-button type="success" plain icon="el-icon-edit">修改</el-button>
        <el-button type="danger" plain icon="el-icon-delete">删除</el-button>
        <el-button type="warning" plain icon="el-icon-download">导出</el-button>
      </div>
      <div class="table-bd">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />

          <el-table-column
            type="index"
            width="80"
            label="角色编号"
          />
          <el-table-column
            property="name"
            label="角色名称"
          />
          <el-table-column
            property="nameId"
            label="权限字符"
          />
          <el-table-column
            property="sort"
            label="显示顺序"
          />
          <el-table-column
            property="status"
            label="状态"
            align="center"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
              />
            </template>
          </el-table-column>
          <el-table-column
            property="createtime"
            label="创建时间"
            align="center"
          />
          <el-table-column
            label="操作"
            align="center"
            width="260"
          >
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-edit" @click="editData(scope.row)">编辑</el-button>
              <el-button type="text" icon="el-icon-circle-check" @click="authorData(scope.row)">数据权限</el-button>
              <el-button type="text" icon="el-icon-delete" @click="delData(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      form: {
        name: '',
        moblie: '',
        status: '',
        time: ''
      },
      tableData: [{ status: '1' }],
      currentRow: null,
      currentPage: 2,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }

    }
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {

  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields()
    },
    handleSelectionChange(val) {
      this.currentRow = val
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    editData(row) {},
    authorData(row) {},
    delData(row) { }
  }
}
</script>
<style lang='scss' scoped>
  @import './index.scss'
</style>
